 <template>
    <div>
        <div style="overflow: auto;margin-bottom: 10px;">
            <pagination
                :length="total"
                :pagination="pagination"
                @currpage="getfindData"
                float="right"
            ></pagination>
        </div>
        <el-table
            ref="table"
            :data="findData"
            border
            :header-cell-style="getRowClass"
            style="width: 100%"
            v-loading="loading"
            :class="needFixed?'needFixed-wrapper':''"
        >
            <el-table-column prop="countryName" :label="$t('m.label.country')" width="90px"></el-table-column>
            <el-table-column
                prop="productModelNumber"
                :label="$t('m.label.productModelNumber')"
                width="110"
            >
                <template slot-scope="scope">
                    <el-link
                        :href="'#/productCenter/productBasicInfo?model='+ scope.row.productModelNumber"
                    >{{scope.row.productModelNumber}}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="reviewerName" :label="$t('m.label.reviewerName')" width="150px"></el-table-column>
            <el-table-column prop="starRate" :label="$t('m.label.reviewerFraction')" width="80px">
                <template slot-scope="scope">
                    <div style="    text-align: center;">{{scope.row.starRate}}</div>
                </template>
            </el-table-column>
            <el-table-column :label="$t('m.label.reviewDate')" width="110px">
                <template slot-scope="scope">{{scope.row.reviewDate.slice(0 ,10)}}</template>
            </el-table-column>
            <el-table-column prop="content" :label="$t('m.label.reviewContent')" min-width="250px">
                <template slot-scope="scope">
                    <div style="font-size: 16px;line-height: 18px; font-weight: bold;color:#333">
                        {{scope.row.reviewTitle}}
                        <el-rate
                            v-model="scope.row.starRate"
                            disabled
                            style="    display: inline-block;vertical-align: top;"
                        ></el-rate>
                    </div>
                    <div style="font-size: 12px;line-height: 16px;">{{scope.row.content}}</div>
                </template>
            </el-table-column>
            <el-table-column :label="$t('m.label.reviewUrl')" width="150px">
                <template slot-scope="scope">
                    <el-link
                        type="primary"
                        :href="'http://'+scope.row.reviewUrl"
                        target="view_window"
                        :title="scope.row.reviewUrl"
                        v-if="scope.row.reviewUrl"
                    >{{scope.row.reviewUrl.slice(0 ,14)}}...</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="reviewerUrl" :label="$t('m.label.reviewerUrl')" width="150px">
                <template slot-scope="scope">
                    <el-link
                        type="primary"
                        :href="'http://'+scope.row.reviewerUrl"
                        target="view_window"
                        :title="scope.row.reviewerUrl"
                        v-if="scope.row.reviewerUrl"
                    >{{scope.row.reviewerUrl.slice(0 ,14)}}...</el-link>
                </template>
            </el-table-column>
            <el-table-column :label="$t('m.label.reviewImages')" width="160px">
                <template slot-scope="scope">
                    <el-image
                        style="width: 75px; height: 75px"
                        :src="item"
                        fit="fill"
                        v-for="(item,index) in scope.row.reviewImages"
                        :key="index"
                    ></el-image>
                </template>
            </el-table-column>
        </el-table>
        <div style="overflow: auto;margin-top: 10px;">
            <pagination
                :length="total"
                :pagination="pagination"
                @currpage="getfindData"
                float="right"
            ></pagination>
        </div>
        <scrollTable ref="scrollTable"></scrollTable>
    </div>
</template> 
<script>
import pagination from "components/pagination/pagination.vue";
import scrollTable from "components/scroll/scroll-table.vue";
import { getTable } from "./http";
const ERR_OK = 200;
export default {
    props: {
        formData: {}
    },
    data() {
        return {
            findData: {},
            reviewByTime: {},
            URL_ERR: "",
            loading: true,
            progress: {},
            pagination: {
                pagesize: 20,
                currpage: 1
            },
            total: 0,
            needFixed: false
        };
    },
    created() {
        this.getfindData();
    },
    mounted() {
        this.$emit("columns", this.$refs.table.columns);
    },
    methods: {
        getfindData() {
            this.findData = [];
            this.loading = true;
            this.formData.pageSize = this.pagination.pagesize;
            this.formData.pageNumber = this.pagination.currpage;
            getTable(this.formData).then(res => {
                if (res.data.code === ERR_OK) {
                    if (res.data.data.data !== "没有数据") {
                        this.findData = res.data.data.data;
                        this.total = res.data.data.total;
                    } else {
                        this.findData = [];
                        this.total = 0;
                    }
                    this.loading = false;
                    this.$refs.scrollTable.scrollShow(this.$refs.table)
                }
            });
        },
        // 标题背景颜色
        getRowClass({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return "background: #EBEEF5 ";
            } else {
                return "";
            }
        }
    },
    watch: {
        formData() {
            this.pagination.currpage = 1;
            this.total = 0;
            this.getfindData();
        }
    },
    components: {
        pagination,
        scrollTable
    }
};
</script>
